import './index.less'
import React, { useState } from 'react'
import { Button, Empty, Input, Space, theme, Transfer, Tree, Typography } from 'antd'
import type { TransferProps, TreeDataNode } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
interface IProps {
  title?: string
  subTitle?: string
}

const arr = [
  {
    url: '../pages/RecoveryRecord/index.tsx',
    path: 'recoveryrecord',
    fullPath: '/productcenter/add/recoveryrecord',
    icon: '',
    name: '应用管理',
    isKeepAlive: true,
    isShowInMenu: true,
  },
  {
    url: '../pages/ProductCenter/index123123123.tsx',
    path: 'add123',
    fullPath: '/productcenter/add123123',
    icon: '',
    name: '123123123',
    isShowInMenu: true,
    children: [
      {
        url: '../pages/GrantRecord/index.tsx',
        path: 'grantrecord',
        fullPath: '/productcenter/add123123/grantrecord',
        icon: '',
        name: '路由管理中心',
        isKeepAlive: true,
        isShowInMenu: true,
      },
    ],
  },
  {
    url: '../pages/GrantRecord/index.tsx',
    path: 'grantrecord',
    fullPath: '/grantrecord',
    icon: '',
    name: '路由管理中心123',
    isKeepAlive: true,
    isShowInMenu: true,
  },
  {
    url: '../pages/DeviceCenter/index.tsx',
    path: '',
    fullPath: '/devicecenter',
    icon: '',
    name: '设备中心',
    isKeepAlive: true,
    isShowInMenu: true,
  },
  {
    url: '../pages/ProductType/index.tsx',
    path: 'producttype',
    fullPath: '/producttype',
    icon: '',
    name: '产品类型',
    isKeepAlive: true,
    isShowInMenu: true,
  },
  {
    url: '../pages/RegisterRecord/index.tsx',
    path: 'registerrecord',
    fullPath: '/registerrecord',
    icon: '',
    name: '注册记录',
    isKeepAlive: true,
    isShowInMenu: true,
  },
  {
    url: '../pages/routes/index.tsx',
    path: 'routes',
    fullPath: '/routes',
    icon: '',
    name: '路由管理中心',
    isKeepAlive: true,
    isShowInMenu: true,
  },
  {
    url: '../pages/RecoveryRecord/index.tsx',
    path: 'recoveryrecord',
    fullPath: '/recoveryrecord',
    icon: '',
    name: '应用管理',
    isKeepAlive: true,
    isShowInMenu: true,
  },
]
const handleChildren = (arr: any[]): any[] => {
  return arr.map((item) => {
    if (Array.isArray(item.children)) {
      return {
        key: item.fullPath,
        title: item.name,
        children: handleChildren(item.children),
      }
    } else {
      return {
        key: item.fullPath,
        title: item.name,
        children: [],
      }
    }
  })
}
const newarr = handleChildren(arr)

export default function TransferTree(props: IProps) {
  const [menuKeys, setMenuKeys] = useState<React.Key[]>([])
  const [funcKeys, setFuncKeys] = useState<React.Key[]>([])
  const [menuList, setMenuList] = useState([])
  const [funcList, setFuncList] = useState([])
  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value)
  }
  const handleCheck = (keys: React.Key[]) => {
    console.log(keys, 'k')
  }
  return (
    <div className="treetransfer_wrap">
      <div className="tw_left">
        <div className="tw_header">
          <div className="twheader_title">{props.title ? props.title : '菜单权限'}</div>
          <div className="twheader_actions">
            <Space>
              <Typography.Link>全选</Typography.Link>
              <Typography.Link>全不选</Typography.Link>
            </Space>
          </div>
        </div>
        <div className="tw_search_box">
          <Input
            placeholder="搜索菜单"
            prefix={<SearchOutlined style={{ color: '#999' }} />}
            className="search_input"
            onChange={handleSearch}
          />
        </div>
        {arr && arr.length > 0 ? (
          <Tree
            className="tw_tree"
            blockNode
            checkable
            checkStrictly
            defaultExpandAll
            checkedKeys={menuKeys}
            treeData={newarr}
            onCheck={(_, { node }) => handleCheck(node)}
            onSelect={(_, { node }) => handleCheck(node)}
          />
        ) : (
          <EmptyCom></EmptyCom>
        )}
      </div>
      <div className="tw_right">
        <div className="tw_header">
          <div className="twheader_title">{props.subTitle ? props.subTitle : '功能权限（角色组权限）'}</div>
          <div className="twheader_actions">
            <Space>
              <Typography.Link>全选</Typography.Link>
              <Typography.Link>全不选</Typography.Link>
            </Space>
          </div>
        </div>
        <div className="tw_search_box">
          <Input
            placeholder="搜索功能"
            prefix={<SearchOutlined style={{ color: '#999' }} />}
            className="search_input"
            onChange={handleSearch}
          />
        </div>
        {arr && arr.length > 0 ? (
          <Tree
            className="tw_tree"
            blockNode
            checkable
            checkStrictly
            defaultExpandAll
            checkedKeys={menuKeys}
            treeData={newarr}
            onCheck={(_, { node: { key } }) => handleCheck(key)}
            onSelect={(_, { node: { key } }) => handleCheck(key)}
          />
        ) : (
          <EmptyCom></EmptyCom>
        )}
      </div>
    </div>
  )
}

const EmptyCom = () => {
  return (
    <Empty
      style={{
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}
      image={Empty.PRESENTED_IMAGE_SIMPLE}
    />
  )
}
